<template>
    <div class="v-top">
        <Card :bordered="true" class="mt28">
            <p slot="title">客流量Top10</p>
            <div id="chartTop10" class="fl"></div>
            <ul class="v-top10">
                <li v-for="(item, index) in Top10(censusArr)">
                    <span class="v-top10-title">{{ index + 1 }} {{ item.areaName }}</span>
                    <Progress :percent="item.enters / top10Sum * 100" hide-info></Progress>
                    <span class="v-top10-info"> {{ item.enters }}人</span>
                </li>
            </ul>
            <Table :columns="columnsData" :data="censusArr" style="margin: 20px 0 30px;"></Table>
        </Card>
    </div>
</template>

<script>
    var echarts = require('echarts/lib/echarts');
	require('echarts/lib/chart/map');
    require('echarts/map/js/china.js');

    export default {
        name: "v-top",
        props: {
            censusArr: Array,
            enterTotlesArr: Array
        },
        data() {
            return {
                params: { // （选择其中一个或一组）
                    exactDate: null, // 具体日期（选择昨天或今天用此字段传参）
                    dateNum: null, // 过去多少天
                    startDate: null, // 开始日期
                    endDate: null // 结束日期
                },
                top10Sum: 0
            }
        },
        computed: {
            columnsData() {
                let columns = []
                columns.push({
                    title: '品牌',
                    key: 'brandName',
                    sortable: true
                })
                columns.push({
                    title: '门店',
                    key: 'areaName',
                    sortable: true
                })
                columns.push({
                    title: '店外客流',
                    key: 'outStore',
                    sortable: true
                })
                columns.push({
                    title: '入店客流',
                    key: 'enterStore',
                    sortable: true
                })
                columns.push({
                    title: '男性占比',
                    key: 'males',
                    sortable: true,
                    render: (h, params) => {
                        let ratio = params.row.males / params.row.enters * 100
                        return h('div', parseInt(ratio) + '%')
                    }
                })
                columns.push({
                    title: '女性占比',
                    key: 'females',
                    sortable: true,
                    render: (h, params) => {
                        let ratio = params.row.females / params.row.enters * 100
                        return h('div', parseInt(ratio) + '%')
                    }
                })
                columns.push({
                    title: '到店年龄最多',
                    render: (h, params) => {
                        let age = ''
                        let ageArr = [params.row.age1, params.row.age2, params.row.age3, params.row.age4, params.row.age5]
                        ageArr.forEach((i, index) => {
                            if (Math.max(params.row.age1, params.row.age2, params.row.age3, params.row.age4, params.row.age5) === i) {
                                switch(index) {
                                    case 0:
                                       age = '0-18'
                                       break;
                                    case 1:
                                       age = '19-30'
                                       break;
                                    case 2:
                                       age = '31-40'
                                       break;
                                    case 3:
                                       age = '41-50'
                                       break;
                                    case 4:
                                       age = '51及以上'
                                       break;
                                    default:
                                }
                            }
                        })
                        return h('div', age)
                    }
                })
                return columns
            },
            getAjaxParams() {
              return this.$store.state.timeParams
            }
        },
        created() {
            let day = new Date()
            day.setTime(day.getTime())
            let month = day.getMonth() + 1
            month = month < 10 ? '0' + month : month
            let dayFormat = day.getFullYear() + '-' + month + '-' + day.getDate()
            this.provinceEntersData({
                exactDate: dayFormat
            })
        },
        watch: {
            getAjaxParams(val) {
              this.provinceEntersData(val)
            }
        },
        methods: {
            Top10 (data) {
                let _top10Sum = 0
                this.censusArr.slice(0, 10).map((item) => {
                    _top10Sum += item.enters
                })
                this.top10Sum = _top10Sum
                return data.slice(0, 10)
            },
            provinceEntersData(params) {
                this.$store.dispatch('provinceEntersData', params).then((res) => {
					if (res.success === '1') {
						var json = res;
						
						//提取JSON
						var maxEnters = 0; //最大人数
						var census = json["data"];
						var chinaMapArr = [];
						for (const v in census) {
							chinaMapArr.push({
								"name": census[v]["province"],
								"value": census[v]["enters"]
							});
							maxEnters = census[v]["enters"] > maxEnters ? census[v]["enters"] : maxEnters;
						}

						var myChart = echarts.init(document.getElementById('chartTop10'));

						var option = {
							backgroundColor: '#2B3B5C',
							visualMap: {
								min: 0,
								max: maxEnters,
								left: '8%',
								top: 'bottom',
								color: ['orangered', 'yellow', 'lightskyblue'],
								text: ['高', '低'],
								calculable: true,
								textStyle :{
									color : '#ffffff'
								}
							},
							series: [{
								name: 'data1',
								type: 'map',
								mapType: 'china',
								roam: false,
								label: {
									normal: {
										show: false //是否开启省份名称
									},
									emphasis: {
										show: true
									}
								},
								itemStyle: {
									normal: {
										areaColor: '#65A2B7',
										borderColor: '#A9D3C9'
									},
									emphasis: {
										areaColor: '#65A2B7'
									}
								},
								data: chinaMapArr
							}]
						};
						myChart.setOption(option);
					}	
                })
            }
        }
    };
</script>

<style lang="less">
    .v-top {
        margin: 0 -6px;
        .ivu-card-head p,
        .ivu-card-head-inner {
            height: 32px;
            line-height: 32px;
            font-size: 24px;
        }
        .ivu-card-head {
            padding: 30px 20px;
            border-bottom: none;
        }
    }

    #chartTop10 {
        width: 520px;
        height: 460px;
        border-radius: 4px;
        background-color: #2a3c5b;
    }

    .v-top10 {
        height: 460px;
        margin-left: 548px;
        li {
            position: relative;
            padding-left: 140px;
            padding-right: 100px;
            list-style: none;
            margin: 20px 0;
            .v-top10-title {
                position: absolute;
                top: 2px;
                left: 0;
                display: block;
                width: 123px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .v-top10-info {
                position: absolute;
                top: 2px;
                right: 10px;
                width: 70px;
                text-align: left;
            }
        }
    }
</style>
